svg{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    &.read-only *{
        pointer-events: none !important;
    }
    & path.main{
        fill: transparent;
        stroke-width: 2;
        pointer-events: none;
        &.is-current-selection{
            stroke: var(--main) !important;
        }
    }
    & path.interactive{
        cursor: pointer;
        pointer-events: stroke;
        stroke: transparent;
        fill: transparent;
        stroke-width: 14;
    }
    & .break{
        cursor: pointer;
        fill: var(--main);
        pointer-events: all;
        &.is-current-selection{
            display: block !important;
            fill: var(--main);
            filter: brightness(1.25);
        }
    }
    & .break-available{
        cursor: pointer;
        fill: var(--text);
        stroke-width: 2;
        stroke: var(--background);
        pointer-events: all;
    }
    & .line-breaks-container{
        & circle{
            display: none;
        }
        &:hover, &.active{
            & circle{
                display: block;
            }
        }
    }
    & .title{
        pointer-events: none;
        fill: var(--text);
        font-size: 12px;
        & > textPath{
            dominant-baseline: text-after-edge;
        }
    }
}
.title-popup{
    display: flex;
    position: absolute;
    font-size: 1em;
    padding: 0.25em 0.3em;
    z-index: 130;
    background-color: var(--background);
    border: 0.15rem solid var(--border);
    color: var(--text);
    gap: 0.5em;
    & input{
        width: 6.5em;
        background-color: transparent;
        font-size: 0.9em;
        color: var(--text);
        border: 0;
        outline: 0;
        border-bottom: 0.1em solid var(--text);
        text-align: center;
    }
}